<template>
  <div>
    <div>
      <el-row style="margin: 10px" :gutter="2">
        <el-col span="4">
          <el-input v-model="selectForm.name" placeholder="请输入用户名称">
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col span="1">
          <el-button type="primary" @click="selectInfo">搜索</el-button>
        </el-col>

        <el-col span="2" :push="16">
          <AddProject />
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table
        :data="tableData"
        height="400"
        style="width: 100%"
        max-height="600"
        border
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column
          prop="name"
          label="用户名"
          width="180"
          align="center"
        />
        <el-table-column
          prop="phoneNum"
          label="手机号"
          width="140"
          align="center"
        />
        <el-table-column prop="email" label="邮箱" align="center" width="180" />
        <el-table-column
          prop="unit"
          label="所属单位"
          align="center"
          width="180"
        />
        <el-table-column
          prop="userGroupName"
          label="用户组"
          align="center"
          width="180"
        />
        <el-table-column label="操作" align="center" width="180">
          <template #default="scope">
            <el-button
              type="primary"
              @click="handleEdit(scope.row)"
              :disabled="
                !this.hasAuth('sys:userInfo:detail') ||
                !this.hasAuth('sys:userInfo:update')
              "
              >修改</el-button
            >
            <el-button
              type="danger"
              @click="handleDelete(scope.row)"
              :disabled="!this.hasAuth('sys:userInfo:delete')"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:currentPage="currentPage"
        :page-size="10"
        layout="total,prev, pager, next, jumper"
        v-model:total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <!-- 修改框 -->
    <el-drawer
      v-model="editInfo"
      title="信息修改"
      :show-close="false"
      @close="this.$refs.FormData.resetFields()"
    >
      <el-form :model="FormData" ref="FormData" :rules="rules">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="FormData.name" type="text"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNum">
          <el-input v-model="FormData.phoneNum" type="text"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="FormData.email" type="text"></el-input>
        </el-form-item>
        <el-form-item label="所属单位" prop="unit">
          <el-input v-model="FormData.unit" type="text"></el-input>
        </el-form-item>
        <el-form-item label="用户组" prop="userGroupId">
          <el-select v-model="FormData.userGroupId" style="width: 100%">
            <el-option
              v-for="item in userGroupData"
              :key="item.id"
              :label="item.userGroup"
              :value="item.id"
            ></el-option>
            <el-option
              ><span
                ><router-link to="/userMessage/userGroupAdd"
                  >添加用户组</router-link
                ></span
              ></el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('FormData')"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import axios from "../../utils/request";
import { ElNotification } from "element-plus";
import utilFunc from "../../utils/checkFuncs";
export default {
  inject: ["reload"], //页面刷新函数
  data() {
    return {
      tableData: [],
      currentPage: 1, // 默认显示第一条
      totalCount: 1, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      PageSize: 10, // 默认每页显示的条数（可修改）
      pageCount: 1,
      selectForm: {},
      loading: true,
      editInfo: false,
      FormData: {},
      rules: {
        name: [
          { required: true, message: "用户名不允许为空", trigger: "blur" },
        ],
        phoneNum: [
          {
            required: true,
            validator: this.checkPhoneNum,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            validator: this.checkEmail,
            trigger: "blur",
          },
        ],
        unit: [
          { required: true, message: "所属单位不允许为空", trigger: "blur" },
        ],
        userGroupId: [
          { required: true, message: "用户组不允许为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleEdit(index) {
      console.log(index.id);
      axios
        .get("/UserInfo/detail", { params: { id: index.id } })
        .then((res) => {
          // console.log(res.data)
          this.FormData = res.data.data.userInfo;
        });
      this.editInfo = true;
    },
    handleDelete(row) {
      axios
        .get("/UserInfo/delete", { params: { id: row.id } })
        .then((res) => {
          if (res.data.status === 200) {
            ElNotification.success("删除成功");
            this.reload();
          } else {
            ElNotification.error("删除失败，请稍后再试");
          }
        })
        .catch((err) => {
          console.log(err);
          ElNotification.error("删除失败，请稍后再试");
        });
    },
    handleCurrentChange(val) {
      this.getUserInfo(this.currentPage);
      this.currentPage = val;
    },
    getUserInfo(pageNum) {
      this.loading = true;
      axios
        .get("/UserInfo/UserInfoSelect", {
          params: {
            pageNum: pageNum,
            pageSize: this.PageSize,
            name: this.selectForm.name,
          },
        })
        .then((reponse) => {
          // console.log("用户信息：",reponse)
          this.tableData = reponse.data.data.pageInfo.list;
          this.total = reponse.data.data.pageInfo.total;
          this.loading = false;
        });
    },
    selectInfo() {
      this.getUserInfo(this.pageNum);
    },
    getUserGroupInfo() {
      //获取用户组信息
      axios.get("/UserGroup/UserGroupInfo").then((res) => {
        if (res.data.status === 200) {
          this.userGroupData = res.data.data.userGroup;
        }
      });
    },
    submitForm(val) {
      this.$refs.FormData.validate((valid) => {
        if (valid) {
          axios.post("/UserInfo/upDate", this.FormData).then((res) => {
            ElNotification.success(res.data.message);
            this.reload();
          });
        } else {
          return false;
        }
      });
    },
    hasAuth(perm) {
      var authority = this.$store.state.menus.permList;
      return authority.indexOf(perm) > -1;
    },

    /**
     * 表单数据校验函数
     */
    checkPhoneNum(rule, value, callback) {
      if (value == "") {
        callback(new Error("电话号码不允许为空"));
      } else if (!utilFunc.thePhoneIsTure(value)) {
        callback(new Error("请输入正确的电话号码"));
      } else {
        callback();
      }
    },
    checkEmail(rule, value, callback) {
      if (value == "") {
        callback(new Error("邮箱地址不允许为空"));
      } else if (!utilFunc.theEmailIsTrue(value)) {
        callback(new Error("请输入正确的邮箱地址"));
      } else {
        callback();
      }
    },
  },
  mounted() {
    this.getUserInfo(this.pageNum);
    this.getUserGroupInfo();
  },
};
</script>
